<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="gw-simulator-logo.png" type="image/png" />
    <title>万能网关模拟器::1.0.0</title>
    <link href="https://cdn.staticfile.org/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
    <link href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.staticfile.org/bootstrap-select/1.13.9/css/bootstrap-select.min.css" rel="stylesheet" />
    <link href="components/editable-table/editable-table-jdk.css" rel="stylesheet" />
    <link href="components/toast/toast.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet"/>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/2.0.11/clipboard.min.js"></script>
    <script type="text/javascript" src="components/toast/toast.js"></script>
    <script type="text/javascript" src="components/editable-table/editable-table-jdk.js"></script>
</head>
<body>
<div class="flexable page-header">
    <img src="gw-simulator-logo.png" style="width: 96px; height: 96px;">
    <div class="auto-grow column-mode">
        <h1>万能网关模拟器 <small>v1.0.0<small>
            <a title="复制网关URL" id="btn-copy-url" class="copyable"
               style="font-size: small; cursor: pointer; color: #666;"><i class="fa fa-fw fa-copy"></i></a></small>
        </small></h1>
        <div class="fake">假的。你在这里看到的一切都是假的。请勿轻易相信您在这里看到的一切！<br/>
            妈妈再也不用担心我不能测试数据下行了。
        </div>
    </div>
    <div class="auto-grow"></div>
    <div class="input-group mb-3" style="width: 480px; margin: 0 15px 0 0 !important;">
        <input type="text" class="form-control" placeholder="输入API名称进行搜索" id="api-name" />
        <div class="input-group-append">
            <button class="btn btn-outline-primary" type="button" id="btn-search">
                <i class="fa fa-fw fa-search"></i>
            </button>
        </div>
    </div>
    <div>
        <a class="btn btn-primary" data-toggle="modal" data-target="#dialog">
            <i class="fa fa-fw fa-plus"></i> 新增
        </a>
    </div>
</div>
<div class="padding-15">
    <ul id="gateway-list">
<!--
        <li class="gateway-item flexable" data-uri="/abc">
            <div class="gateway-method flexable gwm-put">PUT</div>
            <div class="auto-grow column-mode padding-15">
                <div class="flexable">
                    <div class="gateway-name auto-grow">abc</div>
                    <div>
                        <a class="inline-button copyable" data-role="copy" title="Copy URI" data-clipboard-text="/abc">
                            <i class="fa fa-fw fa-copy"></i>
                        </a>
                        <a class="inline-button" data-role="edit" title="Edit">
                            <i class="fa fa-fw fa-edit"></i>
                        </a>
                        <a class="inline-button" data-role="delete" title="Remove">
                            <i class="fa fa-fw fa-trash"></i>
                        </a>
                        <a class="inline-button" data-role="call" title="Try Me">
                            <i class="fa fa-fw fa-play"></i>
                        </a>
                        <a class="inline-button" data-role="history" title="Show History" href="request-logs.html?if-id=66649172796e48969a5fd2b0a86ecb92">
                            <i class="fa fa-fw fa-history"></i>
                        </a>
                    </div>
                </div>
                <div class="flexable">
                    <div class="line">
                        <span class="gateway-label">请求路径: </span>
                        <span class="gateway-uri">/abc</span>
                    </div>
                </div>
                <div class="line">
                    <span class="gateway-label">应答头: </span>
                    ${httpHeaders}
                </div>
                <div class="flexable">
                    <div class="auto-grow column-mode left-panel">
                        <div class="line">
                            <span class="gateway-label">应答类型: </span>
                            <span class="gateway-return-type">application/json;charset=utf-8</span>
                        </div>
                        <div class="gateway-value">
                            <span class="gateway-label">返回值模板: </span>
                            <pre>{
    "serial": "${serial}"
}</pre>
                        </div>
                    </div>
                    <div class="auto-grow column-mode right-panel">
                        <div class="line">
                            <span class="gateway-label">应答码: </span>
                            <span class="gateway-code">200 OK</span>
                        </div>
                        <div class="form-text text-muted">备注: </div>
                    </div>
                </div>
            </div>
        </li>
-->
    </ul>
</div>
<div class="modal" tabindex="-1" id="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="dialog-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="gw-id" />
                    <div class="row">
                        <div class="form-group col-6">
                            <label for="gw-name">名称</label>
                            <input type="text" id="gw-name" class="form-control" placeholder="人类友好的名称"/>
                            <small id="gw-name-hint" class="text-danger">&nbsp;</small>
                        </div>
                        <div class="form-group col-6">
                            <div class="flexable">
                                <label for="gw-uri">访问路径</label>
                                <div class="auto-grow"></div>
                                <a id="btn-show-help"><i class="fa fa-fw fa-question-circle"></i>
                                    <div id="hint-table">
                                        <table>
                                            <tr>
                                                <th class="code-name">变量名</th><th class="code-type">数据类型</th><th>描述</th>
                                            </tr>
                                            <tr>
                                                <td class="code-name">imei</td>
                                                <td class="code-type">string</td>
                                                <td class="code-desc">设备imei，通常15位字符</td>
                                            </tr>
                                            <tr>
                                                <td class="code-name">serial</td>
                                                <td class="code-type">长整数</td>
                                                <td class="code-desc">一个自增的序列，系统会为每个json字段名单独维护一个序列。每次系统重启将会重置该值.</td>
                                            </tr>
                                            <tr>
                                                <td class="code-name">commandId</td>
                                                <td class="code-type">长整数</td>
                                                <td class="code-desc">一个自增的序列，全局唯一，每次系统重启后将会重置该值</td>
                                            </tr>
                                            <tr>
                                                <td class="code-name">timestamp</td>
                                                <td class="code-type">长整数</td>
                                                <td class="code-desc">时间戳长整数</td>
                                            </tr>
                                            <tr>
                                                <td class="code-name">date</td>
                                                <td class="code-type">日期</td>
                                                <td class="code-desc">yyyy-MM-dd</td>
                                            </tr>
                                            <tr>
                                                <td class="code-name">datetime</td>
                                                <td class="code-type">时间</td>
                                                <td class="code-desc">ISO 标准时间: yyyyMMdd<strong>T</strong>HHmmss<strong>Z</strong></td>
                                            </tr>
                                            <tr>
                                                <td class="code-name">uuid</td>
                                                <td class="code-type">字符串</td>
                                                <td class="code-desc">32位UUID</td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </div>
                            <input type="text" id="gw-uri" class="form-control" placeholder="唯一的访问路径"/>
                            <small id="gw-uri-hint" class="text-danger">&nbsp;</small>
<!--
                            <small class="form-text text-danger">
                                可以用${}来引用某些变量，如 ${imei} 来表示 imei 变量，查询 <a>这里</a> 查看受支持的变量名
                            </small>
-->
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-4">
                            <label for="gw-method">请求方式</label>
                            <select id="gw-method" class="form-control selectpicker">
                                <option value="PUT">PUT</option>
                                <option value="POST">POST</option>
                                <option value="GET">GET</option>
                                <option value="DELETE">DELETE</option>
                            </select>
                        </div>
                        <div class="form-group col-4">
                            <label for="gw-code">应答码</label>
                            <select id="gw-code" class="form-control selectpicker">
                                <option value="200">200 OK</option>
                                <option value="201">201 ACCEPT</option>
                                <option value="404">404 NOT FOUND</option>
                                <option value="500">500 INTERNAL ERROR</option>
                            </select>
                        </div>
                        <div class="form-group col-4">
                            <label for="gw-type">应答类型</label>
                            <select id="gw-type" class="form-control selectpicker">
                                <option value="application/json;charset=utf-8">JSON</option>
                                <option value="text/plain;charset=utf-8">纯文本</option>
                            </select>
                        </div>
                    </div>
                    <div style="margin: 15px auto;">
                        <div class="flexable" style="margin-bottom: 5px;">
                            <span>HTTP 应答头</span>
                            <span class="auto-grow"></span>
                            <div class="flexable">
                                <a class="http-header-button" data-role="add"><i class="fa fa-fw fa-plus"></i></a>
                                <a class="http-header-button disabled" data-role="delete"><i class="fa fa-fw fa-minus"></i></a>
                            </div>
                        </div>
                        <div id="response-headers"></div>
                    </div>
                    <div class="row">
                        <div class="form-group col-6">
                            <label for="gw-value">返回值模板</label>
                            <textarea id="gw-value" style="height: 256px;" class="form-control" placeholder="如果接口没有返回值，这里请留空"></textarea>
                            <small id="gw-value-hint" class="text-danger">&nbsp;</small>
                        </div>
                        <div class="form-group col-6">
                            <label for="gw-remark">备注</label>
                            <textarea id="gw-remark" style="height: 256px;" class="form-control multiline-text"
                                      placeholder="关于接口的备注。&#13;&#10;BTW: 这里没有做任何保护，请不要输入会破坏页面结构的代码，谢谢！毕竟我这么相信您。&#13;&#10;BBTW：隔壁的返回值模板也没保护。"></textarea>
                            <small id="gw-remark-hint" class="text-danger">&nbsp;</small>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="btn-ok">
                    <i class="fa fa-fw fa-check"></i> 确定
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-fw fa-times"></i> 取消
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" id="alerts" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="alerts-message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="alerts-ok">
                    <i class="fa fa-fw fa-check"></i> 确定
                </button>
                <button type="button" class="btn btn-success" id="alerts-yes">
                    <i class="fa fa-fw fa-check"></i> 是
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="alerts-no">
                    <i class="fa fa-fw fa-times"></i> 否
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" id="invoker" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span class="gateway-uri" id="invoker-uri"></span>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="invoke-param-panel"></div>
                <hr />
                <div>
                    <span class="gateway-label">应答码: </span>
                    <span class="gateway-code" id="result-code"></span>
                </div>
                <div>
                    <span class="gateway-label">应答类型: </span>
                    <span id="result-type"></span>
                </div>
                <div>
                    <span class="gateway-label">应答头: </span>
                    <pre id="invoke-response-headers"></pre>
                </div>
                <div class="scroll-wrapper">
                    <pre id="invoke-result-content"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btn-invoke">
                    <i class="fa fa-fw fa-running"></i> 执行
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-fw fa-times"></i> 关闭
                </button>
            </div>
        </div>
    </div>
</div>
<a id="show-more-apis" style="display: block; cursor: pointer; text-align: center;">
    <i class="fa fa-fw fa-angle-double-down"></i> 点击加载更多...
</a>
<script type="text/javascript" src="script/template.js"></script>
<script type="text/javascript" src="script/index.js"></script>
</body>
</html>